 <template>
	<div id="test">
		 <div class="testList">
		 	 <p>—&nbsp;&nbsp;精选类目&nbsp;&nbsp;—</p>
		 </div>
         
         <div class="testImg1">
         	<img src="http://cdn.oudianyun.com/lyf/prod/back-cms/1503054176197_2720_98.jpg@base@tag=imgScale&q=80">
         </div>

         <div class="testImg2">
         	<img src="http://cdn.oudianyun.com/lyf/prod/back-cms/1503053439705_8102_92.jpg@base@tag=imgScale&q=80">
         </div>

         <div class="testImg3">
         	<img src="http://cdn.oudianyun.com/lyf/prod/back-cms/1503055067483_4506_88.jpg@base@tag=imgScale&q=80">
         </div>

         <div class="testImg4">
         	<img src="http://cdn.oudianyun.com/lyf/prod/back-cms/1503053453395_2117_97.jpg@base@tag=imgScale&q=80">
         </div>
         <div class="testFooter">
         	<dl>
         		<dt class="L1">&#xe62f;</dt>
         		<dd>全部</dd>
         	</dl>
         	<dl>
         		<dt class="L2">&#xe66f;</dt>
         		<dd>全部分类</dd>
         	</dl>
         	<dl>
         		<dt class="L3">&#xe61b;</dt>
         		<dd>全球尖货</dd>
         	</dl>
         	<dl>
         		<dt class="L4">&#xe600;</dt>
         		<dd>糖果果冻</dd>
         	</dl>
         	<dl>
         		<dt class="L5">&#xe65b;</dt>
         		<dd>坚果</dd>
         	</dl>
         </div>



         <div class="testFooter1 testFooter" v-show="show">
         	<dl>
         		<dt class="L1">&#xe62f;</dt>
         		<dd>全部</dd>
         	</dl>
         	<dl>
         		<dt class="L2">&#xe66f;</dt>
         		<dd>全部分类</dd>
         	</dl>
         	<dl>
         		<dt class="L3">&#xe61b;</dt>
         		<dd>全球尖货</dd>
         	</dl>
         	<dl>
         		<dt class="L4">&#xe600;</dt>
         		<dd>糖果果冻</dd>
         	</dl>
         	<dl>
         		<dt class="L5">&#xe65b;</dt>
         		<dd>坚果</dd>
         	</dl>
         </div>
	</div>
</template>
<script type="text/javascript">
	export default{
		data(){
			return {
				scoll:"",
				show:""
			}
		},
		methods:{
			menu(){
				this.scroll=document.body.scrollTop;
				// console.log(this.scroll)
				if (document.body.scrollTop>4070){
					this.show=true
				}else{
					this.show=false
				}
				// console.log(this.show)
			}
		},
		mounted(){
			window.addEventListener('scroll',this.menu);
		}
	}
</script>
<style type="text/css" scoped>
	 #test{
		width:100%;
	}
	#test .testList{
		width:100%;
		text-align: center;
	}
	#test .testList p{
		font-size: .35rem;
		padding-top: .28rem;
	}
	#test .testImg1{
		width:100%;
		margin-top: .28rem;
		border-bottom:.35rem solid #e5e5e5;
	}
	#test .testImg1 img{
		width:100%;
	}
	#test .testImg2{
		width:100%;
		border-bottom:.35rem solid #e5e5e5;
	}
	#test .testImg2 img{
		width:100%;
	}
	#test .testImg3{
		width:100%;
		border-bottom:.35rem solid #e5e5e5;
	}
	#test .testImg3 img{
		width:100%;
	}
	#test .testImg4{
		width:100%;
		border-bottom:.35rem solid #e5e5e5;
	}
	#test .testImg4 img{
		width:100%;
	}

	.testFooter .L1{
		font-family: 'iconfont';
		font-size:.8rem;
		margin-top: .15rem;
	}
	@font-face {
	  font-family: 'iconfont';  /* project id 345259 */
	  src: url('//at.alicdn.com/t/font_345259_reveow3f5b7hw7b9.eot');
	  src: url('//at.alicdn.com/t/font_345259_reveow3f5b7hw7b9.eot?#iefix') format('embedded-opentype'),
	  url('//at.alicdn.com/t/font_345259_reveow3f5b7hw7b9.woff') format('woff'),
	  url('//at.alicdn.com/t/font_345259_reveow3f5b7hw7b9.ttf') format('truetype'),
	  url('//at.alicdn.com/t/font_345259_reveow3f5b7hw7b9.svg#iconfont') format('svg');
	}

	.testFooter .L2{
		font-family: 'iconfont';
		font-size:.8rem;
		margin-top: .15rem;
	}
	@font-face {
	  font-family: 'iconfont';  /* project id 345259 */
	  src: url('//at.alicdn.com/t/font_345259_reveow3f5b7hw7b9.eot');
	  src: url('//at.alicdn.com/t/font_345259_reveow3f5b7hw7b9.eot?#iefix') format('embedded-opentype'),
	  url('//at.alicdn.com/t/font_345259_reveow3f5b7hw7b9.woff') format('woff'),
	  url('//at.alicdn.com/t/font_345259_reveow3f5b7hw7b9.ttf') format('truetype'),
	  url('//at.alicdn.com/t/font_345259_reveow3f5b7hw7b9.svg#iconfont') format('svg');
	}

	.testFooter .L3{
		font-family: 'iconfont';
		font-size:.8rem;
		margin-top: .15rem;
	}
	@font-face {
	  font-family: 'iconfont';  /* project id 345259 */
	  src: url('//at.alicdn.com/t/font_345259_reveow3f5b7hw7b9.eot');
	  src: url('//at.alicdn.com/t/font_345259_reveow3f5b7hw7b9.eot?#iefix') format('embedded-opentype'),
	  url('//at.alicdn.com/t/font_345259_reveow3f5b7hw7b9.woff') format('woff'),
	  url('//at.alicdn.com/t/font_345259_reveow3f5b7hw7b9.ttf') format('truetype'),
	  url('//at.alicdn.com/t/font_345259_reveow3f5b7hw7b9.svg#iconfont') format('svg');
	}

	.testFooter .L4{
		font-family: 'iconfont';
		font-size:.8rem;
		margin-top: .15rem;
	}
	@font-face {
	  font-family: 'iconfont';  /* project id 345259 */
	  src: url('//at.alicdn.com/t/font_345259_reveow3f5b7hw7b9.eot');
	  src: url('//at.alicdn.com/t/font_345259_reveow3f5b7hw7b9.eot?#iefix') format('embedded-opentype'),
	  url('//at.alicdn.com/t/font_345259_reveow3f5b7hw7b9.woff') format('woff'),
	  url('//at.alicdn.com/t/font_345259_reveow3f5b7hw7b9.ttf') format('truetype'),
	  url('//at.alicdn.com/t/font_345259_reveow3f5b7hw7b9.svg#iconfont') format('svg');
	}

	.testFooter .L5{
		font-family: 'iconfont';
		font-size:.8rem;
		margin-top: .15rem;
	}
	@font-face {
	  font-family: 'iconfont';  /* project id 345259 */
	  src: url('//at.alicdn.com/t/font_345259_reveow3f5b7hw7b9.eot');
	  src: url('//at.alicdn.com/t/font_345259_reveow3f5b7hw7b9.eot?#iefix') format('embedded-opentype'),
	  url('//at.alicdn.com/t/font_345259_reveow3f5b7hw7b9.woff') format('woff'),
	  url('//at.alicdn.com/t/font_345259_reveow3f5b7hw7b9.ttf') format('truetype'),
	  url('//at.alicdn.com/t/font_345259_reveow3f5b7hw7b9.svg#iconfont') format('svg');
	}

	.testFooter{
		width:100%;
		display: flex;
		justify-content: space-around;
		/*flex-wrap: nowrap;*/
	}
	.testFooter dl{
		width:20%;
		text-align: center;
		border-right:1px #e5e5e5 solid
	}

	.testFooter1{
		position: fixed;
		top: 7.5%;
		right: 0;
		left: 0;
		background:#fff;
		z-index: 1000;
		padding-bottom: .3rem;
		border-top: .01rem solid #e5e5e5;
	}
</style>